feat(RichTextInput): create new component by JulienSaguez · Pull Request #6318 · scaleway/ultraviolet

JulienSaguez · 2026-04-09T08:54:34Z

Summary

Type

Feature

Summarize concisely:

What is expected?

RichTextInput: create component RichTextInput and RichTextInputField

The following changes were made:

(Describe what you did)

Relevant logs and/or screenshots

Page	Before	After
url	screenshot	screenshot
url	screenshot	screenshot

changeset-bot · 2026-04-09T08:54:43Z

🦋 Changeset detected

Latest commit: 63e7331

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ultraviolet/form	Minor
@ultraviolet/ui	Minor
@ultraviolet/nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codecov · 2026-04-09T08:59:52Z

Codecov Report

❌ Patch coverage is 83.83838% with 32 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.44%. Comparing base (2b89546) to head (63e7331).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/ui/src/compositions/RichTextInput/Toolbar.tsx	68.51%	15 Missing and 2 partials ⚠️
...kages/ui/src/compositions/RichTextInput/helpers.ts	64.70%	6 Missing ⚠️
...es/ui/src/compositions/RichTextInput/editorCore.ts	88.88%	4 Missing and 1 partial ⚠️
...kages/ui/src/compositions/RichTextInput/Notice.tsx	81.81%	2 Missing ⚠️
...ckages/ui/src/compositions/RichTextInput/index.tsx	95.83%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6318      +/-   ##
==========================================
+ Coverage   83.30%   92.44%   +9.13%     
==========================================
  Files          44      540     +496     
  Lines         683    10234    +9551     
  Branches      195     3913    +3718     
==========================================
+ Hits          569     9461    +8892     
- Misses        104      706     +602     
- Partials       10       67      +57

Files with missing lines	Coverage Δ
...form/src/compositions/RichTextInputField/index.tsx	`100.00% <100.00%> (ø)`
...es/ui/src/compositions/RichTextInput/styles.css.ts	`100.00% <100.00%> (ø)`
...kages/ui/src/compositions/RichTextInput/Notice.tsx	`81.81% <81.81%> (ø)`
...ckages/ui/src/compositions/RichTextInput/index.tsx	`95.83% <95.83%> (ø)`
...es/ui/src/compositions/RichTextInput/editorCore.ts	`88.88% <88.88%> (ø)`
...kages/ui/src/compositions/RichTextInput/helpers.ts	`64.70% <64.70%> (ø)`
...ages/ui/src/compositions/RichTextInput/Toolbar.tsx	`68.51% <68.51%> (ø)`

... and 489 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e4ae00d...63e7331. Read the comment docs.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

lisalupi · 2026-04-10T12:01:24Z

+      {...props}
+      error={getError(
+        {
+          label: label ?? ariaLabel ?? name,


Suggested change

label: label ?? ariaLabel ?? name,

label: errorLabel ?? label ?? ariaLabel ?? name,

errorLabel is a new prop of BaseFieldProps that can be used to customize the error message (see #6241)

lisalupi · 2026-04-10T12:22:18Z

+        field.onChange(value)
+        onChange?.(value as PathValue<TFieldValues, Path<TFieldValues>>)
+      }}
+      value={field.value ?? ''}


why add ?? ''

lisalupi · 2026-04-10T12:27:27Z

+      )
+    },
+  ],
+  title: 'Form/Components/Fields/RichTextEditorField',


Suggested change

title: 'Form/Components/Fields/RichTextEditorField',

title: 'Form/Components/Compositions/RichTextEditorField',

lisalupi · 2026-04-10T12:28:11Z

+
+export default {
+  component: RichTextEditor,
+  title: 'UI/Data Entry/RichTextEditor',


Suggested change

title: 'UI/Data Entry/RichTextEditor',

title: 'Compositions/RichTextEditor',

lisalupi · 2026-04-10T12:38:45Z

+            style={{
+              minHeight,
+              ...(maxHeight ? { maxHeight } : {}),
+            }}


why not add this in richTextEditorStyle.docRegion paired with assignInlineVars?

lisalupi · 2026-04-10T12:39:34Z

+  sentiment?: 'danger' | 'success' | 'neutral'
+}) => (
+  <Row gap="1" templateColumns="minmax(0, 1fr) min-content">
+    <div>


i don't understand the role of this div

lisalupi · 2026-04-10T12:44:14Z

+})
+
+export const docRegion = style({
+  lineHeight: 1.5,


Suggested change

lineHeight: 1.5,

lineHeight: theme.typography.body.lineHeight,

lisalupi

I can copy-paste text that renders as h1, h2, etc., but it is not possible to write headings. Is it ok?

lisalupi · 2026-04-14T13:58:10Z

+      )
+    },
+  ],
+  title: 'Compositions/RichTextEditorField',


Suggested change

title: 'Compositions/RichTextEditorField',

title: 'Form/Components/Compositions/RichTextEditorField',

lisalupi · 2026-04-14T14:54:07Z

+  const maxHeight =
+    typeof maxRows === 'number'
+      ? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`
+      : undefined


Suggested change

const maxHeight =

typeof maxRows === 'number'

? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`

: undefined

const maxHeight =

typeof maxRows === 'number'

? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})`

: 'none'

Just a suggestion

lisalupi · 2026-04-14T14:54:43Z

+              ...assignInlineVars({
+                [docRegionMaxHeightVar]: maxHeight ?? 'none',
+              }),
+              minHeight,


minHeight should be an inlineVar too

jsulpis · 2026-04-15T15:34:45Z

+  const isInOrderedList = isSelectionInNodeType(editorState, orderedList)
+
+  return (
+    <Stack alignItems="center" direction="row" gap={1}>


idéalement il faudrait un role="toolbar" comme dans l'exemple ProseMirror. La navigation clavier est aussi différente (flèches pour naviguer entre les boutons, et quand on clique dessus ça remet le focus dans l'éditeur).

jsulpis · 2026-04-15T15:36:11Z

+            disabled={disabled}
+            size="small"
+            variant={isMarkActive(editorState, strongMark) ? 'filled' : 'ghost'}
+            onMouseDown={event => {


utiliser onClick pour supporter le clavier, et qui est déclenché quand on relâche le clic. C'est plus courant que de faire l'action au MouseDown, avant d'avoir relâché

pourquoi event.preventDefault() ?

il faut un label explicite aux boutons, là c'est le nom de l'icône ("BoldIcon"). Je vois qu'on utilise par endroits des fichiers de traduction en.ts, tu pourrais faire pareil en attendant qu'on trouve une meilleure solution

Utiliser onMouseDown permet runCommand avant le changement de focus

L'event.preventDefault permet d'empecher le comportement par defaut d'un clic sur un bouton qui est de prendre le focus

Je rajoute les labels

dans la démo de prosemirror on peut cliquer sur les boutons de la toolbar au clavier et à la souris, et le champ garde le focus. Est-ce qu'ils donnent le code de ça pour faire pareil ? C'est un peu gênant de pouvoir focus les boutons au clavier mais qu'on peut pas cliquer dessus

jsulpis · 2026-04-16T07:44:43Z

+  return (
+    <Stack gap="0.5">
+      {label ? (
+        <Label htmlFor={id ?? localId} required={required}>


2 issues :

the localId is not used on the editor so the label points to nothing

a label element cannot be linked to a div. You can use an id on the label and aria-labelledby on the editor instead

jsulpis · 2026-04-16T07:46:05Z

+          }),
+          className,
+        )}
+        data-disabled={disabled ? 'true' : undefined}


why do you need this data-disabled attribute ?

Effectivement il n'est pas utile

so you can remove it ?

jsulpis · 2026-04-16T07:50:41Z

+  disabled?: boolean
+  sentiment?: 'danger' | 'success' | 'neutral'
+}) => (
+  <Row gap="1" templateColumns="minmax(0, 1fr) min-content">


the container of the Notice message should have:

an id paired with an aria-describedby attribute on the text editor to link the message to the editor

a role="status" which implicitely add an aria-live="polite" so that screen readers read the status message when it's updated

…older

jsulpis · 2026-04-21T07:36:44Z

+    }
+    await userEvent.click(doc)
+    await userEvent.type(doc, 'This is an example')
+    await userEvent.click(screen.getByText('Submit'))


always use getByRole if possible. This is more precise, because you want to click on a button, not a text

Suggested change

await userEvent.click(screen.getByText('Submit'))

await userEvent.click(screen.getByRole('button', { name: 'Submit' }))

jsulpis · 2026-04-21T07:45:26Z

+    const italicButton = screen.getByTitle('ItalicIcon').closest('button')
+    const bulletListButton = screen
+      .getByTitle('ListBulletIcon')
+      .closest('button')


Suggested change

const italicButton = screen.getByTitle('ItalicIcon').closest('button')

const bulletListButton = screen

.getByTitle('ListBulletIcon')

.closest('button')

const italicButton = screen.getByRole('button', { name: "Italic" })

const bulletListButton = screen

.getByRole('button', { name: "Bullet List" })

jsulpis · 2026-04-21T07:46:16Z

+    await userEvent.type(doc, 'Styled ')
+    await userEvent.click(bulletListButton!)
+    await userEvent.type(doc, 'item')
+    await userEvent.click(screen.getByText('Submit'))


Suggested change

await userEvent.click(screen.getByText('Submit'))

await userEvent.click(screen.getByRole('button', { name: "Submit" }))

jsulpis · 2026-04-21T08:01:46Z

+    const status = screen.getByRole('status')
+    expect(status).toHaveAttribute('aria-describedby', 'id-test-notice')
+    expect(status).toHaveTextContent(successMessage)


it's not the status that should have the aria-describedby attribute, it's the element that is described by the status, so in your case the text editor. You have to :

add an id attribute on the status element

add an aria-describedby="status-id" attribute on the editor
this way you "link" the status to the editor, and screen readers will read the status when focusing the editor.

As suggested, you can use toHaveAccessibleDescription to check this behavior without reading directly the attributes (test the behavior and not the implementation)

Suggested change

const status = screen.getByRole('status')

expect(status).toHaveAttribute('aria-describedby', 'id-test-notice')

expect(status).toHaveTextContent(successMessage)

const doc = screen.getByLabelText<HTMLDivElement>('Test')

expect(doc).toHaveAccessibleDescription(successMessage)

expect(screen.getByText(successMessage)).toHaveRole('status')

use this same syntax for the other tests below

jsulpis · 2026-04-21T08:11:49Z

+          }),
+          className,
+        )}
+        data-disabled={disabled ? 'true' : undefined}


so you can remove it ?

jsulpis · 2026-04-21T08:19:31Z

+            onFocus={onFocus}
+          />
+          {error ? (
+            <AlertCircleIcon


is it normal that the error icon is here ? it looks a bit weird to me

The icon seems to me you're in the right place, we can see together if you can reproduce it.

jsulpis · 2026-04-21T08:21:22Z

+  return (
+    <Stack gap="0.5">
+      {label ? (
+        <Label htmlFor={id} id={`${id}-label`} required={required}>


you have to generate an id with useId() as a fallback if it's not provided in the props, otherwise you have "undefined" ids in the DOM

jsulpis · 2026-04-21T08:24:42Z

+            disabled={disabled}
+            size="small"
+            variant={isMarkActive(editorState, strongMark) ? 'filled' : 'ghost'}
+            onMouseDown={event => {


dans la démo de prosemirror on peut cliquer sur les boutons de la toolbar au clavier et à la souris, et le champ garde le focus. Est-ce qu'ils donnent le code de ça pour faire pareil ? C'est un peu gênant de pouvoir focus les boutons au clavier mais qu'on peut pas cliquer dessus

jsulpis · 2026-04-21T08:27:20Z

+    />
+
+    <RichTextInput
+      aria-label="Bulleted list"


you should not need the aria-label in all those examples if it's the same as the label. I think the aria-label on this component should only be used in rare cases like when we don't want the label to be visible, we use the aria-label instead

JulienSaguez self-assigned this Apr 9, 2026

JulienSaguez requested review from a team and lisalupi as code owners April 9, 2026 08:54

JulienSaguez marked this pull request as draft April 9, 2026 08:54

scaleway-bot deployed to storybook April 9, 2026 08:57 View deployment

JulienSaguez force-pushed the feat/rich-text-editor branch from d4b5583 to 8b976b0 Compare April 9, 2026 12:54

scaleway-bot deployed to storybook April 9, 2026 12:56 View deployment

JulienSaguez marked this pull request as ready for review April 10, 2026 10:02

JulienSaguez requested review from etienne-scaleway and jsulpis April 10, 2026 10:02

scaleway-bot deployed to storybook April 10, 2026 10:04 View deployment

scaleway-bot deployed to storybook April 10, 2026 12:06 View deployment

lisalupi reviewed Apr 10, 2026

View reviewed changes

JulienSaguez force-pushed the feat/rich-text-editor branch from 82f8b17 to 82b9a91 Compare April 14, 2026 12:30

scaleway-bot deployed to storybook April 14, 2026 12:41 View deployment

scaleway-bot deployed to storybook April 14, 2026 13:56 View deployment

lisalupi requested changes Apr 14, 2026

View reviewed changes

jsulpis requested changes Apr 16, 2026

View reviewed changes

JulienSaguez changed the title ~~feat(RichTextEditor): create new component~~ feat(RichTextInput): create new component Apr 20, 2026

JulienSaguez requested a review from jsulpis April 20, 2026 14:55

JulienSaguez added 8 commits April 20, 2026 17:17

feat(RichTextEditor): create new component

ec5fb7d

fix(RichTextEditor): fix threads and move component in compositions f…

46b1df6

…older

fix(RichTextEditor): fix tests

bf37250

fix(RichTextEditor): fix anothers threads

df1ea11

fix(RichTextEditor): add errorLabel prop

4dd00d2

fix(RichTextEditor): update snapshots

0b5e162

fix(RichTextEditor): fix threads part one

40deec8

fix(RichTextInput): fix threads part two and rename to richtextinput

63e7331

JulienSaguez force-pushed the feat/rich-text-editor branch from 6e9a1dc to 63e7331 Compare April 20, 2026 15:18

scaleway-bot deployed to storybook April 20, 2026 15:20 View deployment

jsulpis requested changes Apr 21, 2026

View reviewed changes

	label: label ?? ariaLabel ?? name,
	label: errorLabel ?? label ?? ariaLabel ?? name,

	title: 'Form/Components/Fields/RichTextEditorField',
	title: 'Form/Components/Compositions/RichTextEditorField',

	title: 'UI/Data Entry/RichTextEditor',
	title: 'Compositions/RichTextEditor',

	lineHeight: 1.5,
	lineHeight: theme.typography.body.lineHeight,

	title: 'Compositions/RichTextEditorField',
	title: 'Form/Components/Compositions/RichTextEditorField',

	await userEvent.click(screen.getByText('Submit'))
	await userEvent.click(screen.getByRole('button', { name: 'Submit' }))

Conversation

JulienSaguez commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type

Summarize concisely:

What is expected?

The following changes were made:

Relevant logs and/or screenshots

Uh oh!

changeset-bot bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codecov bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lisalupi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

JulienSaguez commented Apr 9, 2026 •

edited

Loading

changeset-bot bot commented Apr 9, 2026 •

edited

Loading

codecov bot commented Apr 9, 2026 •

edited

Loading